<template>
  <div>
    <div class="top-content" v-loading="loading">
      <div class="title">
        <i class="el-icon-s-marketing"></i>
        {{yearMonth}}{{typeList.find(item => item.type === typeIndex).lable}}目标
      </div>
      {{typeDate}}
      <type-list-nav
        :typeList="typeList"
        @clickType="clickType"
        :typeIndex="typeIndex"
        :typeDate="typeDate"
        @changeDate="changeDate"
        class="topType"
      ></type-list-nav>
      <el-row :gutter="20">
        <el-col :span="8">
          <p>
            销售额
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              t="1597646415312"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              p-id="49933"
              width="200"
              height="200"
            >
              <path
                d="M677.59104 293.376h-320l-8.33024-7.168c-8.97024-7.71072-88.3712-76.76416-114.04288-128.21504-15.60576-31.26784-9.216-53.50912-1.1008-66.65728 19.23584-31.18592 62.75072-35.84 86.97856-35.84 44.9792 0 53.43232-6.784 63.22688-14.62272a103.0656 103.0656 0 0 1 34.20672-19.53792c47.91296-15.99488 70.9376 1.41824 112.74752 33.01888L540.672 61.44c28.5696 21.504 47.50848 11.6736 49.5616 10.46528a422.48192 422.48192 0 0 0 42.2144-31.488l3.1744-2.7648c60.2624-45.33248 94.12096-6.272 116.5056 19.53792 5.39648 6.22592 10.97728 12.66176 17.21344 18.90816 22.71744 22.75328 29.99808 50.99008 20.52096 79.49312a92.99968 92.99968 0 0 1-17.2288 30.31552c-16.42496 27.7504-69.7344 82.08384-86.3744 98.74944zM379.75552 233.89696h273.16736c30.5152-31.16032 63.44192-67.7376 68.92032-78.71488l2.14528-4.31104 3.40992-3.41504c14.1568-15.12448 3.50208-25.80992 0-29.31712-7.68-7.71072-14.25408-15.27296-20.03968-21.92896-6.46656-7.45472-16.25088-18.73408-20.08064-19.85024a36.39808 36.39808 0 0 0-14.6432 7.82848 496.2304 496.2304 0 0 1-50.22208 37.66784c-19.70176 13.17376-66.59584 25.28768-117.34016-12.84608l-9.52832-7.168c-39.936-30.208-40.96-29.83936-58.23488-24.064a45.568 45.568 0 0 0-15.90272 9.5488c-19.54816 15.6672-39.3472 27.648-100.29568 27.648-20.81792 0-32.768 4.6336-36.02944 7.26016a29.9008 29.9008 0 0 0 3.22048 9.17504C303.72352 162.304 353.7152 210.5856 379.75552 233.89696zM581.32992 1008.64c-123.02336 0-274.67776-1.56672-284.2624-1.65888l-1.32608-0.04608c-3.91168-0.20992-96.7936-6.73792-177.60256-132.52608l-1.5872-2.80064C94.72 827.82208 69.632 760.32 103.936 680.07936 142.11584 590.848 287.744 433.42848 335.73888 385.3312l8.704-8.704h332.04736l8.38144 7.3728c7.26528 6.38976 178.49856 158.1824 234.26048 304.67072 23.73632 62.336 23.7824 123.35104 0.12288 167.38304-34.65216 69.46816-103.88992 146.2272-193.0752 150.8864-24.3968 1.26976-80.73728 1.69984-144.84992 1.69984z m-282.46528-61.11744c22.66624 0.23552 356.864 3.55328 424.22784 0.0256 63.7952-3.32288 117.1712-66.1248 143.49824-118.89152 15.66208-29.184 14.41792-73.27744-2.90816-118.784-44.08832-115.83488-175.70816-242.29376-209.82272-273.78688H369.11104C309.67808 496.98304 188.57472 633.16992 158.4896 703.488c-19.072 44.59008-15.96928 86.5536 10.4192 140.06272C229.44256 936.96 291.7376 946.688 298.86464 947.52256z"
                fill="#074D9C"
                p-id="49934"
              />
              <path
                d="M638.55104 530.06336L573.952 668.57984h57.68192v56.70912h-81.68448l-6.45632 13.01504v16.27136h88.13568v56.704h-88.13568v61.35808H468.2752v-61.35808h-88.576v-56.704h88.576V738.304l-5.07904-13.01504H379.6736v-56.70912h66.90816L382.464 530.06336h77.50144l49.83808 134.79936h0.9216l51.6864-134.79936h76.13952z"
                fill="#F8B62D"
                p-id="49935"
              />
            </svg>
          </p>
          <span>{{allTotal.orderedProductSalesTotal | formatData}}</span>
        </el-col>
        <el-col :span="8">
          <p>
            利润总额
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              t="1597636939779"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              p-id="18855"
              width="200"
              height="200"
            >
              <path
                d="M102.13376 821.61152c7.1168 33.88416 28.45696 101.64224 187.35104 101.64224h467.2s158.89408 0.60416 163.6352-107.68896c1.1776-26.91072-23.13216-53.2224-60.2624-77.55264-163.70688-107.26912-476.42112-112.20992-662.71232-15.00672-58.26048 30.40256-99.59936 64.38912-95.21152 98.60608z"
                fill="#F4CA1C"
                p-id="18856"
              />
              <path
                d="M736.44032 318.52032c37.6064-52.06016 70.86592-117.44256 37.95968-183.43424a99.36384 99.36384 0 0 0-63.2064-54.04672c-35.67616-9.728-72.55552 1.8176-96.18432 12.50816A145.80224 145.80224 0 0 0 514.048 61.952c-54.272 4.608-78.52544 17.48992-100.864 33.15712-39.6032-10.92096-89.03168-16.57344-127.94368 4.68992a101.376 101.376 0 0 0-49.53088 66.22208C221.184 223.10912 256.47616 276.992 295.03488 324.03968 222.44864 373.76 53.31456 513.75616 67.37408 729.28768l0.12288 1.47456C83.93728 884.57216 158.93504 962.56 290.4064 962.56h467.31776c1.85344-0.08192 194.1504-1.35168 199.6288-246.70208 5.16096-231.80288-160.1024-358.6304-220.91264-397.3376z m21.53984 572.6464H290.4064c-117.85728 0-143.0784-84.42368-152.02816-167.26528-12.0832-192.24576 157.312-315.98592 209.56672-349.35296a55.94112 55.94112 0 0 0 12.5952-83.27168c-33.2288-39.20384-62.976-79.36-55.808-107.56608 3.47648-13.62432 9.6512-18.50368 14.6432-21.23264 17.0496-9.33376 50.3808-7.168 89.1392 5.79072L425.8816 174.08l18.5344-13.5168c21.62688-15.872 32.48128-23.80288 75.6992-27.48928 36.08576-3.072 62.20288 26.5728 62.2592 26.624l20.2496 24.23808 26.43968-17.23392c11.55072-7.52128 43.56096-22.19008 63.488-16.768 5.20704 1.42336 11.98592 4.64384 18.19136 17.08032 14.42816 28.93824 2.14016 65.39264-41.088 121.9072a55.92576 55.92576 0 0 0 16.54784 82.53952c34.23744 19.53792 204.8 127.90272 199.9872 342.79936-3.83488 170.5984-115.53792 176.768-128.20992 176.90624z m-127.83104-276.11136a35.69664 35.69664 0 0 0 0-71.39328h-35.328l35.70688-49.9456a35.63008 35.63008 0 1 0-57.856-41.59488l-54.57408 76.33408L463.5392 456.448a35.6352 35.6352 0 1 0-56.71424 43.17184l33.35168 44.032h-33.57184a35.69664 35.69664 0 0 0 0 71.39328h76.00128v26.85952H406.6048a35.69664 35.69664 0 0 0 0 71.39328h76.00128v52.32128a35.59936 35.59936 0 1 0 71.20384 0v-52.31104h76.3392a35.69664 35.69664 0 0 0 0-71.39328h-76.3392v-26.85952h76.3392z"
                fill="#595BB3"
                p-id="18857"
              />
            </svg>
          </p>
          <span>{{allTotal.profitTotal | formatData}}</span>
        </el-col>
        <el-col :span="8">
          <p>
            订单总计
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              t="1597646495189"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              p-id="51450"
              width="200"
              height="200"
            >
              <path
                d="M473.3 914.5c-48.6 0-95.8-9.5-140.3-28.3C290.1 868 251.6 842 218.5 809c-33.1-33.1-59.1-71.6-77.2-114.5C122.5 650 113 602.8 113 554.2s9.5-95.8 28.3-140.3c18.2-42.9 44.1-81.4 77.2-114.5s71.6-59.1 114.5-77.2c44.5-18.8 91.6-28.3 140.3-28.3 24.9 0 45 20.1 45 45v270.3h270.3c24.9 0 45 20.1 45 45 0 48.6-9.5 95.8-28.3 140.3-18.2 42.9-44.1 81.4-77.2 114.5s-71.6 59.1-114.5 77.2c-44.5 18.8-91.7 28.3-140.3 28.3z m-45-627c-55.1 9.2-105.9 35.2-146.1 75.5-51.1 51.1-79.2 119-79.2 191.2 0 72.2 28.1 140.1 79.2 191.1s118.9 79.2 191.1 79.2 140.1-28.1 191.1-79.2c40.3-40.3 66.3-91.1 75.5-146.1H473.3c-24.9 0-45-20.1-45-45V287.5z"
                fill="#242F44"
                p-id="51451"
              />
              <path
                d="M911 470.3c0-199.3-161.5-360.8-360.8-360.8v360.8H911z"
                fill="#FFCE00"
                p-id="51452"
              />
            </svg>
          </p>
          <span>{{allTotal.unitOrderTotal | formatOrder}}</span>
        </el-col>
      </el-row>
    </div>
    <div v-for="(item,index) in aimsList" :key="index" class="orderAimsItem" v-loading="loading">
      <div class="name">{{ item.businessUnit }}</div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="progress-wrap">
            <div class="progress-name">计算销售额</div>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                目标销售额：{{item.targetSales |formatData}}
                <i class="tooltip-left"></i>
                完成销售额：{{item.orderedProductSales | formatData}}
              </div>
              <div class="progressbar-content">
                <div
                  class="progress-bar__inner"
                  :style="item.countSales | progressbar"
                  :class="item.countSales | classType"
                >
                  <div
                    class="progress-bar__innerText"
                  >{{item.countSales === Infinity? 0 : item.countSales}}%</div>
                </div>
              </div>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="progress-wrap">
            <div class="progress-name">实际销售额</div>
            <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content">
                目标销售额：{{item.targetSales |formatData}}
                <i class="tooltip-left"></i>
                实际销售额：{{item.actualSales | formatData}}
              </div>
              <div class="progressbar-content">
                <div
                  class="progress-bar__inner"
                  :style="item.countActualSales | progressbar"
                  :class="item.countActualSales | classType"
                >
                  <div
                    class="progress-bar__innerText"
                  >{{item.countActualSales === Infinity?0 : item.countActualSales}}%</div>
                </div>
              </div>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="progress-wrap">
              <div class="progress-name">计算利润</div>
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  目标利润：{{item.targetProfit |formatData}}
                  <i class="tooltip-left"></i>
                  完成利润：{{item.profit | formatData}}
                </div>
                <div class="progressbar-content">
                  <div
                    class="progress-bar__inner"
                    :style="item.countProfit | progressbar"
                    :class="item.countProfit | classType"
                  >
                    <div
                      class="progress-bar__innerText"
                    >{{item.countProfit === Infinity?0 : item.countProfit}}%</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="progress-wrap">
              <div class="progress-name">实际利润</div>
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content">
                  目标利润：{{item.targetProfit |formatData}}
                  <i class="tooltip-left"></i>
                  完成利润：{{item.actualProfit | formatData}}
                </div>
                <div class="progressbar-content">
                  <div
                    class="progress-bar__inner"
                    :style="item.countActualProfit | progressbar"
                    :class="item.countActualProfit | classType"
                  >
                    <div
                      class="progress-bar__innerText"
                    >{{item.countActualProfit === Infinity?0 : item.countActualProfit}}%</div>
                  </div>
                </div>
              </el-tooltip>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { orderAims } from "@/api/dashboard";
import typeListNav from "./typeListNavAims";
export default {
  components: {
    typeListNav,
  },
  props: {
    strokeWidth: {
      type: Number,
      default: 20,
    },
  },
  data() {
    var myDate = new Date();
    var tYear = myDate.getFullYear();
    var tMonth = myDate.getMonth();
    return {
      loading: true,
      aimsList: [],
      allTotal: {},
      yearMonth: tYear,
      typeIndex: "year",
      typeDate: "",
      typeUrl: "",
      typeList: [
        {
          lable: "年度",
          type: "year",
        },
        {
          lable: "月度",
          type: "month",
        },
      ],
    };
  },
  filters: {
    formatData(data) {
      if (data) {
        return data.toFixed(2).replace(/(\d{1,2})(?=(\d{3})+\.)/g, "$1,");
      }
    },
    formatOrder(data) {
      if (data) {
        return data.toFixed(0).replace(/(?=(?!\b)(\d{3})+$)/g, ",");
      }
    },
    classType(percentage) {
      if (percentage < 30) {
        return "bg1";
      } else if (percentage < 70) {
        return "bg2";
      } else {
        return "bg3";
      }
    },
    progressbar(key) {
      let width = Number(key);
      if (width === Infinity) {
        return "width:0";
      }
      if (width >= 100) {
        return "width:100%";
      } else if (width <= 0) {
        return "width:0";
      } else {
        return "width:" + width + "%";
      }
    },
  },
  created() {
    this.changeDate("2020");
  },
  methods: {
    clickType(item) {
      this.typeIndex = item.type;
      this.changeDate(new Date());
    },
    getOrderAims() {
      this.loading = true;
      orderAims(this.typeUrl).then((res) => {
        const row = [];
        const data = res.data.data;
        this.loading = false;
        data.orderDataList.forEach((item) => {
          let findTargetBU = this.findTargetBU(data.targetList, item.bu);
          if (findTargetBU) {
            row.push({
              businessUnit: item.bu,
              countSales: Number(
                (
                  (item.orderedProductSales / findTargetBU.targetSales) *
                  100
                ).toFixed(2)
              ),
              countActualProfit: Number(
                (
                  (findTargetBU.actualProfit / findTargetBU.targetProfit) *
                  100
                ).toFixed(2)
              ),
              countProfit: Number(
                ((item.profit / findTargetBU.targetProfit) * 100).toFixed(2)
              ),
              countActualSales: Number(
                (
                  (findTargetBU.actualSales / findTargetBU.targetSales) *
                  100
                ).toFixed(2)
              ),
              orderedProductSales: item.orderedProductSales,
              profit: item.profit,
              actualProfit: findTargetBU.actualProfit,
              actualSales: findTargetBU.actualSales,
              targetProfit: findTargetBU.targetProfit,
              targetSales: findTargetBU.targetSales,
            });
          }
        });
        this.aimsList = row.sort(this.sortData);
        this.allTotal = {
          orderedProductSalesTotal: data.orderedProductSalesTotal,
          profitTotal: data.profitTotal,
          unitOrderTotal: data.unitOrderTotal,
        };
      });
    },
    sortData(a, b) {
      return b.orderedProductSales > a.orderedProductSales ? 1 : -1;
    },
    findTargetBU(arr, bu) {
      return arr.find(
        (el) => el.businessUnit.toLowerCase() === bu.toLowerCase()
      );
    },
    changeDate(date) {
      var myDate = new Date(date);
      var tYear = myDate.getFullYear();
      var tMonth = myDate.getMonth();
      if (this.typeIndex === "year") {
        this.typeUrl = "getOrderData/" + tYear;
        this.yearMonth = tYear;
      } else {
        this.typeUrl = "getOrderDataByMonth/" + tYear + "/" + (tMonth + 1);
        this.yearMonth = tYear + "-" + (tMonth + 1);
      }
      this.getOrderAims();
    },
  },
};
</script>
<style lang="scss" scoped>
.topType {
  top: 10px;
}
.tooltip-left {
  padding-left: 10px;
}
.top-content {
  background: #ffffff;
  padding: 10px 10px 0 10px;
  margin-bottom: 10px;
  .title {
    font-size: 16px;
    i {
      color: #409eff;
      padding-right: 3px;
    }
  }
  .el-col {
    padding: 35px 0 21px 0;
    text-align: center;
    p {
      padding: 0;
      margin: 0;
      font-size: 14px;
      line-height: 30px;
      svg {
        margin-left: 5px;
        display: inline-block;
        vertical-align: text-bottom;
        vertical-align: sub;
        height: 25px;
        width: auto;
      }
    }
    span {
      color: #409eff;
      font-size: 22px;
    }
  }
}
.orderAimsItem {
  background: #ffffff;
  padding: 10px;
  margin-bottom: 10px;
  .name {
    font-size: 16px;
    padding: 8px 0 6px 0;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
.progress-wrap {
  position: relative;
  margin: 10px 0 2px 0;
  .progress-name {
    float: left;
    font-size: 12px;
    line-height: 28px;
    width: 80px;
  }
  .progressbar-content {
    position: relative;
    height: 28px;
    background: #d2d5dc;
    border-radius: 100px;
    overflow: hidden;
    .progress-bar__inner {
      position: absolute;
      left: 0;
      width: 0;
      height: 100%;
      transition: 0.3s all;
      background: #2196f3;
      border-radius: 100px;

      .progress-bar__innerText {
        padding: 0 5px;
        color: #ffffff;
        font-size: 12px;
        text-align: right;
        height: 28px;
        line-height: 28px;
      }
      &.bg1 {
        background: linear-gradient(to left, #ec4545, #f17048);
      }
      &.bg2 {
        background: linear-gradient(to left, #15b191, #1de5bc);
      }
      &.bg3 {
        background: linear-gradient(to left, #2197f3, #2cc2f3);
      }
    }
  }
  .data {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    line-height: 25px;
  }
}
</style>